<template>
	<div :class="className">
		<div class="box">
			<el-row>
				<el-col :span="12">
					<div class="box_item">
						<div class="cycle blue">
							<dv-digital-flop :config="todayConfig" />
						</div>
						<div class="text" style="color: #00fdfa">今天完工数</div>
					</div>
				</el-col>
				<el-col :span="12">
					<div class="box_item">
						<div class="cycle green">
							<dv-digital-flop :config="yesterdayConfig" />
						</div>
						<div class="text" style="color: #07f7a8">昨天完工数</div>
					</div>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="12">
					<div class="box_item">
						<div class="cycle yellow">
							<dv-digital-flop :config="thisMonthConfig" />
						</div>
						<div class="text" style="color: #e3b337">本月累计完工数</div>
					</div>
				</el-col>
				<el-col :span="12">
					<div class="box_item">
						<div class="cycle red">
							<dv-digital-flop :config="thisMonthReworkCountConfig" />
						</div>
						<div class="text" style="color: #f5023d">本月累计返工数</div>
					</div>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script>
const style = {
    fontSize: 24,
}

export default {
    props: {
        className: { type: String, default: '' },
        isMock: { type: Boolean, default: false },
    },
    data() {
        return {
            dataTimer: null,
            todayConfig: {
                number: [0],
                content: '{nt}',
                style: {
                    ...style,
                    fill: "#00fdfa",
                },
            },
            yesterdayConfig: {
                number: [0],
                content: '{nt}',
                style: {
                    ...style,
                    fill: "#07f7a8",
                },
            },
            thisMonthConfig: {
                number: [0],
                content: '{nt}',
                style: {
                    ...style,
                    fill: "#e3b337",
                },
            },
            thisMonthReworkCountConfig: {
                number: [0],
                content: '{nt}',
                style: {
                    ...style,
                    fill: "#f5023d",
                },
            }
        };
    },
    mounted() {
        if (this.isMock) {
            this.mock();
            return;
        }

        this.getData();
        this.setTimer();
    },
    beforeUnmount() {
        if (this.dataTimer) {
            clearInterval(this.dataTimer);
            this.dataTimer = null;
        }
    },
    methods: {
        setTimer() {
            this.dataTimer = setInterval(async () => {
                await this.getData();
            }, 71000); // 71s
        },
        mock() {
        },
        async getData() {
            try {
                const resp = await this.$API.reportproduction.stat.get();
                if (resp.code === 200) {
                    const data = resp.data;
                    this.todayConfig.number[0] = data.todayCount;
                    this.yesterdayConfig.number[0] = data.yesterdayCount;
                    this.thisMonthConfig.number[0] = data.thisMonthCount;
                    this.thisMonthReworkCountConfig.number[0] = data.thisMonthReworkCount;
                }
            } catch {
                console.warn("[production-task] 无响应数据");
            }
        }
    },
};
</script>

<style lang="scss" scoped>
%bg {
    display: flex;
    justify-content: center;
    align-items: center;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 128px 128px;
}

.box {
    height: 100%;
    width: 100%;
}

.box_item {
    margin-top: 10px;
    height: 195px;
    width: 100%;
}

.cycle {
    height: 80%;
    width: 100%;
}

.text {
    text-align: center;
    font-size: 18px;
}

.blue {
    @extend %bg;
    background-image: url("@/assets/images/v_cycle_blue.png");
}

.green {
    @extend %bg;
    background-image: url("@/assets/images/v_cycle_green.png");
}

.yellow {
    @extend %bg;
    background-image: url("@/assets/images/v_cycle_yellow.png");
}

.red {
    @extend %bg;
    background-image: url("@/assets/images/v_cycle_red.png");
}
</style>
